<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一条情话</button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">
    import { useTalkStore } from '@/store/loveTalk';
    import { storeToRefs } from 'pinia';

    const loveTalkStore = useTalkStore()
    const { talkList } = storeToRefs(loveTalkStore)
    loveTalkStore.$subscribe((mutated, state) => {
        localStorage.setItem('talkList', JSON.stringify(state.talkList))
    })

    // 方法
    async function getLoveTalk() {
        loveTalkStore.getATalk()
    }

</script>

<style scoped>
    .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>